<template>
  <van-search v-model="value" placeholder="请输入搜索关键词" @search="onSearch" class="search"/>
    <van-tabs v-model:active="active">
        <van-tab title="皇榜热搜">
            <div>
                <hot-list :list = "HBlist"></hot-list>
            </div>
        </van-tab>
        <van-tab title="二手热搜">
            <div>
                <hot-list :list = "ESlist"></hot-list>
            </div>
        </van-tab>
    </van-tabs>
</template>

<script>
import { Search } from 'vant';
import { ref } from 'vue';
import { Dialog } from 'vant';
import { Tab, Tabs } from 'vant';
import HotList from './HotList.vue'
export default {
    data(){
        return{
            HBlist:[
                {
                    rank: '1',
                    title: '榜一'
                },
                {
                    rank: '2',
                    title: '榜二'
                },
                {
                    rank: '3',
                    title: '榜三'
                },
                {
                    rank: '4',
                    title: '榜四'
                },
                {
                    rank: '5',
                    title: '榜五'
                }
            ],
            ESlist:[
                {
                    rank: '1',
                    title: '二手榜一'
                },
                {
                    rank: '2',
                    title: '二手榜二'
                },
                {
                    rank: '3',
                    title: '二手榜三'
                },
                {
                    rank: '4',
                    title: '二手榜四'
                },
                {
                    rank: '5',
                    title: '二手榜五'
                }
            ],
        }
    },
    mounted(){
        //网络请求热榜
    },
    components: {
        'van-search' : Search,
        'Dialog' : Dialog,
        'van-tabs' : Tabs,
        'van-tab' : Tab,
        'hot-list' : HotList
    },
    setup() {
        const value = ref('');
        const mySearch = function(value){
            //定义搜索方法
            var that = this
            Dialog.confirm({
            title: '提示',
            confirmButtonText: '二手商品',
            cancelButtonText : '皇榜',
            confirmButtonColor : '#000000',
            message:
                '您需要搜索那种类型的商品？',
            })
            .then(() => {
                alert(value + "二手")
            })
            .catch(() => {
                // on cancel
                alert(value + "皇榜")
            });
        }
        const onSearch = (val) => mySearch(val);
        return {
            value,
            onSearch
        };
    },
    methods: {
        myserch(){
            alert("搜素")
        }
    }
}
</script>

<style scoped>
.se{
    margin-top: 1em;
    display: flex;
    justify-content: space-around;
}
.search{
    margin-top: 1em;
}
</style>